<template>
  <div
    v-if="routerView"
    class="app-content-main"
  >
    <transition
      mode="out-in"
      :name="transitionName"
    >
      <keep-alive
        :include="cachedRoutes"
        :max="keepAliveMaxNum"
      >
        <router-view :key="viewKey" />
      </keep-alive>
    </transition>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Setting, Theme } from '@/config'

export default {
  data() {
    return {
      keepAliveMaxNum: Setting.keepAliveMaxNum,
      transitionName: Theme.transitionName,
      routerView: true
    }
  },
  computed: {
    ...mapGetters({
      visitedRoutes: 'tabview/visitedRoutes'
    }),
    cachedRoutes() {
      const cachedRoutesArr = []
      this.visitedRoutes.forEach((item) => {
        if (!item.meta.noKeepAlive) {
          item.name && cachedRoutesArr.push(item.name)
        }
      })
      return cachedRoutesArr
    },
    viewKey() {
      return this.$route.path
    }
  },
  created() {
    // 重载所有路由
    this.$baseEventBus.$on('reload-router-view', () => {
      this.routerView = false
      this.$nextTick(() => {
        this.routerView = true
      })
    })
  }
}
</script>
